<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
.app {
  //点击路由测试
  position: fixed;
  bottom: 0;
  z-index: 2000;
}

#app {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  position: relative;
}
</style>
<script>
export default {
  methods: {
    // 拉伸缩放的方式
    screenTransform() {
      let width = window.innerWidth;
      let height = window.innerHeight;
      console.log(width, height)
      let _obj = document.getElementById("app");
      if (width < height) {
        // 如果宽小于高，例如手机iphone等屏幕  1080
        _obj.style.transform = `rotate(90deg) scale(${height / 1920},${
            width / 1080
        }) translate(0,-100%)`;
      } else {
        _obj.style.transform = `scale(${width / 1920},${height / 1080})`;
      }
    },
  },
  //return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  mounted() {
    if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
      this.screenTransform();
      window.addEventListener("resize", () => {
        this.screenTransform();
      });
    } else {
      console.log("手机")
      this.screenTransform();
      window.addEventListener("resize", () => {
        this.screenTransform();
      });
    }
  }
}
</script>

